<template>
  <div>
    <slide-verify
      :l="42"
      :r="10"
      :w="410"
      :h="270"
      ref="slideblock"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :accuracy="accuracy"
      :slider-text="text"
    ></slide-verify>
    <el-alert
      :title="msg"
      :type="type"
      center
      :closable="false"
      show-icon>
    </el-alert>
    <!--<el-button @click="handleClick" >在父组件可以点我刷新哦</el-button>-->
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    },
    verify: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      msg: '',
      type: 'info',
      text: '请向右滑',
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 1
    }
  },
  methods: {
    onSuccess (times) {
      console.log('验证通过，耗时' + times + '毫秒'
      )
      this.type = 'success'
      this.msg = `验证成功！耗时${(times / 1000).toFixed(1)}s`
      this.slideVerifyDialogVisible = false
      this.verifySuccess = true
    },
    onFail () {
      console.log('验证不通过')
      this.type = 'error'
      this.msg = '哎呀！差一点成功了呢！'
    },
    onRefresh () {
      console.log('点击了刷新小图标')
      this.type = 'info'
      this.msg = ''
    },
    onFulfilled () {
      this.type = 'info'
      console.log('刷新成功啦！')
    },
    onAgain () {
      console.log('检测到非人为操作的哦！')
      this.type = 'error'
      this.msg = 'try again'
      // 刷新
      this.$refs.slideblock.reset()
    },
    handleClick () {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset()
    }
  },
  name: 'slideVerify2',
  computed: {
    slideVerifyDialogVisible: {
      get () {
        return this.dialogVisible
      },
      set (val) {
        this.$emit('dialog', val)
      }
    },
    verifySuccess: {
      get () {
        return this.dialogVisible
      },
      set (val) {
        this.$emit('verified', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
